<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
   <meta charset="UTF-8">
   <title>ok-admin v2.0 | 很赞的后台模版</title>
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
   <meta name="keywords" content="ok-admin v2.0,ok-admin网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载">
   <meta name="description" content="ok-admin v2.0，顾名思义，很赞的后台模版，它是一款基于Layui框架的轻量级扁平化且完全免费开源的网站后台管理系统模板，适合中小型CMS后台系统。">
   <link rel="shortcut icon" href="/static/images/favicon.ico" type="image/x-icon"/>
   <link rel="stylesheet" href="/static/lib/layui/css/layui.css">
   <link rel="stylesheet" href="/static/css/okadmin-v2.css"/>
   <link rel="stylesheet" href="/static/css/login.css"/>
</head>
<body>
<div id="app">
   <form class="layui-form" id="formId" method="post">
      <div class="login_face"><img src="/static/images/a.png" class="userAvatar"></div>
      <div class="layui-form-item input-item">
         <label for="userName">用户名</label>
         <input type="text" lay-verify="required" id="username" name="username" placeholder="请输入用户名" autocomplete="off"
                class="layui-input">
      </div>
      <div class="layui-form-item input-item">
         <label for="password">密码</label>
         <input type="password" lay-verify="required|pass" id="password" name="password" placeholder="请输入密码" autocomplete="off"
                class="layui-input">
      </div>
      <div class="layui-form-item input-item" id="imgCode">
         <label for="code">验证码</label>
         <input type="text" lay-verify="yzmCode" name="code" placeholder="请输入验证码" autocomplete="off" id="code"
                class="layui-input">
         <div class="img ok-none-select" id="codeImg"></div>
      </div>
      <div class="layui-form-item">
         <button class="layui-btn layui-block" lay-filter="login" lay-submit="">登录</button>
      </div>
      <input type="hidden" name ='client_id' value="web_service">
      <input type="hidden" name ='client_secret' value="secret">
      <input type="hidden" name ='grant_type' value="password">
   </form>
</div>

<!--js逻辑-->
<script src="/static/lib/layui/layui.js"></script>
<script th:inline="none">

  layui.use(['form','jquery', 'okGVerify'], function () {
    var form = layui.form;
    var  $ = layui.jquery;
    var okGVerify = layui.okGVerify;
    var verifyCode = new okGVerify("#codeImg");
    var res = verifyCode.validate(document.getElementById("code").value);
    // form.verify({
    //   pass: [
    //     /^[\S]{6,12}$/,
    //     '密码必须6到12位，且不能出现空格'
    //   ],
    //    //验证码校验
    //   yzmCode: function (val) {
    //     if (verifyCode.validate(val) != "true") {
    //       return verifyCode.validate(val)
    //     }
    //   }
    // });
     //

    form.on('submit(login)', function (data) {

       var params = serializeJson();
       console.log(params)
        layer.msg("登陆中...", {icon: 6, time: 1000, anim: 0});

       $.ajax({
          url:"http://127.0.0.1:9001/oauth2/oauth/token",
          data:params,
          dataType:"json",
          type:'post',
          success:function (res) {
             console.log(res)

             if(JSON.stringify(res).indexOf("access_token") != -1){
                  localStorage.setItem("Authorization","Bearer "+res.access_token);
                  window.location.href = '/web/index';

             }else {
                var resJson = JSON.parse(res)
                layer.msg(resJson.error_description, {icon: 6, time: 1000, anim: 0});

             }
             // if(res.code=='0'){
             //    setTimeout(function () {
             //       window.location = "/index"
             //    },1000);
             // }
          }
       })
      return false;
    });

    function serializeJson() {
       var array = $("#formId").serializeArray();
       var obj=new Object();
       $.each(array,function(index,param){
          if(!(param.name in obj)){
             obj[param.name]=param.value;
          }  
       });
       return obj;
    }

  });
</script>
</body>
</html>
